<template>
  <div>
    <!-- 开始页 -->
    <div class="indexStep" v-if="stepIndex==1">
      <div class="topBox">
        <span class="numBox">4</span>
        <span>步搞定装修</span>
      </div>
      <img class="centerImg" src="@/assets/images/test1.jpg" />
      <span class="usePeople">
        <i>29876人</i>正在使用4步搞定装修法
      </span>
      <div class="HeadPortrait">
        <img v-for="(i,index) in 5" :key="index" class="headImg" src="@/assets/images/test1.jpg" />
      </div>
      <span class="indexStepBtn" @click="cutStep(2)">立即体验</span>
    </div>
    <!-- 第一步 -->
    <div class="firstStep" v-if="stepIndex==2" v-cloak>
      <div class="topBoxEmpty"></div>
      <div class="topBox">
        <four-steps :step="1" ref="changeStep"></four-steps>
        <span class="usePeople">
          <em>3245</em>
          <i>人</i>正通过明确装修意向来确定装修需求
        </span>
      </div>
      <div class="centerBox">
        <span class="title">您的装修预算？</span>
        <!-- 价格输入 -->
        <div class="budgetInputBox">
          <input
            type="number"
            class="budgetInput"
            v-model="stepData.one.priBet[0]"
            @change="budgetPriceChange1"
          />
          <span class="textSpan1">-</span>
          <input
            type="number"
            class="budgetInput"
            v-model="stepData.one.priBet[1]"
            @change="budgetPriceChange2"
          />
          <span class="textSpan2">
            万
            <i v-if="stepData.one.priBet[1]==100">以上</i>
          </span>
        </div>
        <!-- 价格列表 -->
        <div class="scaleBox">
          <span>0</span>
          <span>5</span>
          <span>10</span>
          <span>15</span>
          <span>20</span>
          <span>25</span>
          <span>40</span>
          <span class="scale55">55</span>
          <span style="min-width:auto;">70</span>
          <span style="flex:1;text-align:right;">100以上</span>
        </div>
        <!-- 拖拉组件 -->
        <slider v-on:changeSlider="changeSlider" ref="slider" v-cloak></slider>
        <!-- 城市选择 -->
        <!-- <span class="title titleRoomArea">请选择所属分站？<i>（最多选择一项）</i></span> -->
        <!-- 城市选择 -->
        <!-- <div class="areaChoice"> -->
        <group class="cityGroup">
          <popup-picker
            title="您要装修的房屋所在城市？"
            value-text-align="right"
            :data="stepData.one.cityData"
            v-model="stepData.one.city"
            placeholder="请选择"
            @on-change="cityChange"
          ></popup-picker>
        </group>
        <!-- <span v-for="(item,index) in stepData.one.cityData"
                :key="index"
                :class="stepData.one.city==index?'areaSpan areaActive':'areaSpan'"
                @click="choiceStep('one','city',index)"
        >{{item.name}}</span>-->
        <!-- </div> -->
        <!-- 房屋面积选择 -->
        <span class="title titleRoomArea">
          房屋使用面积？
          <i>（最多选择一项）</i>
        </span>
        <!-- 面积选择 -->
        <div class="areaChoice">
          <span
            v-for="(item,index) in stepData.one.areaData"
            :key="index"
            :class="stepData.one.area.id==item.id?'areaSpan areaActive':'areaSpan'"
            @click="choiceStep('one','area',item)"
          >{{item.name}}</span>
        </div>
        <!-- 房屋户型选择 -->
        <span class="title titleRoomArea">
          您的房屋户型？
          <i>（最多选择一项）</i>
        </span>
        <div class="areaChoice">
          <span
            v-for="(item,index) in stepData.one.hxData"
            :key="index"
            :class="stepData.one.hx.id==item.id?'areaSpan areaActive':'areaSpan'"
            @click="choiceStep('one','hx',item)"
          >{{item.name}}</span>
        </div>
        <!-- 装修风格选择 -->
        <group class="cityGroup">
          <popup-picker
            title="您喜欢的装修风格？"
            value-text-align="right"
            :data="stepData.one.fgData"
            v-model="stepData.one.fg"
            placeholder="请选择"
            @on-change="fgChange"
          ></popup-picker>
        </group>
        <!-- <span class="title titleRoomArea">您的装修风格是？<i>（最多选择一项）</i></span>
        <div class="areaChoice"> 
          <span v-for="(item,index) in stepData.one.fgData"
                :key="index"
                :class="stepData.one.fg==index?'areaSpan areaActive':'areaSpan'"
                @click="choiceStep('one','fg',index)"
                >{{item.name}}</span>
        </div>-->
        <span class="twoStepBtn" @click="cutStep(3)">帮我推荐</span>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="zhezhao" v-if="zzSta" @touchmove.prevent v-cloak></div>
    <!-- 第二步 -->
    <div class="twoStep" v-if="stepIndex==3" v-cloak>
      <div :class="detailStatus?'topBoxEmpty':'topBoxEmpty2'"></div>
      <div class="topBox">
        <four-steps :step="1" ref="changeStep"></four-steps>
        <div class="choLab">
          <span class="chLaSpan" v-html="stepData.one.area.name"></span>
          <span class="chLaSpan" v-html="stepData.one.hx.name"></span>
          <span class="chLaSpan" v-html="stepData.one.priBet[0]+'-'+stepData.one.priBet[1]+'万'"></span>
          <img src="@/assets/images/right_jian.png" alt @click="cutStep(2)" />
        </div>
      </div>
      <div class="classify" v-if="detailStatus">
        <div class="title">
          <span class="title2">以下为您推荐专属您风格的设计案例</span>
          <span class="title3" @click="sxBtn">
            筛选
            <img class="upImg" src="@/assets/images/up.jpg" alt />
          </span>
        </div>
        <div class="labCon" v-if="zzSta">
          <!-- 城市 -->
          <div class="labBox">
            <span class="labTitle">城市：</span>
            <popup-picker
              value-text-align="center"
              class="labSpan cityGroup2"
              :data="stepData.one.cityData"
              v-model="stepData.one.city"
              placeholder="请选择"
              @on-change="cityChange"
            ></popup-picker>
            <!-- <div class="labLisBox">
              <span :class="stepData.one.city==index?'labSpan actStyle':'labSpan'" 
                v-for="(item,index) in stepData.one.cityData" 
                :key="index"  
                @click="choiceStep('one','city',index)">{{item.name}}</span>
            </div>-->
          </div>
          <!-- 面积 -->
          <div class="labBox">
            <span class="labTitle">面积：</span>
            <div class="labLisBox">
              <span
                :class="stepData.one.area.id==item.id?'labSpan actStyle':'labSpan'"
                v-for="(item,index) in stepData.one.areaData"
                :key="index"
                @click="choiceStep('one','area',item)"
              >{{item.name}}</span>
            </div>
          </div>
          <!-- 户型 -->
          <div class="labBox">
            <span class="labTitle">户型：</span>
            <div class="labLisBox">
              <span
                :class="stepData.one.hx.id==item.id?'labSpan actStyle':'labSpan'"
                v-for="(item,index) in stepData.one.hxData"
                :key="index"
                @click="choiceStep('one','hx',item)"
              >{{item.name}}</span>
            </div>
          </div>

          <!-- 装修风格 -->
          <div class="labBox">
            <span class="labTitle labTitle2">装修风格：</span>
            <popup-picker
              value-text-align="center"
              class="labSpan cityGroup2"
              :data="stepData.one.fgData"
              v-model="stepData.one.fg"
              placeholder="请选择"
              @on-change="fgChange"
            ></popup-picker>
            <!-- <div class="labLisBox">
              <span :class="stepData.one.fg==index?'labSpan actStyle':'labSpan'" 
                v-for="(item,index) in stepData.one.fgData"
                :key="index"  
                @click="choiceStep('one','fg',index)">{{item.name}}</span>
            </div>-->
          </div>
        </div>
        <div class="btoBtnBox" v-if="zzSta">
          <span class="btnLeft" @click="resetBtn">重置</span>
          <span class="btnRight" @click="confirmBtn">确认</span>
        </div>
      </div>
      <!-- 案例 -->
      <div class="resultList"  v-for="(item,index) in this.stepData.one.seaData.data" :key="index">
        <span class="listSpan1">
          与您的装修意向匹配度
          <i>90%</i>
        </span>
        <div class="centerImg" @click="toRoomDetail(item.Subject_id)">
          <img class="listImg" :src="item.File_info!=''?(item.domain+item.File_info[0].File_imgfile+'!hmm'):'@/assets/images/eye.png'" alt />
          <div class="cenBot">
            <img class="eyeImg" src="@/assets/images/eye.png" alt />
            <span>{{item.Subject_views}}人对此案例感兴趣</span>
          </div>
        </div>
        <span class="labSpan1">{{item.Subject_subject}}</span>
        <span class="labSpan2">{{stepData.one.hx.name}} 丨 {{stepData.one.fg[0]?stepData.one.fg[0]+' 丨 ':''}}{{item.Subject_area}}平米</span>
        <!-- <span class="labSpan2">80-120㎡ 丨 三口之家 丨 新中式</span> -->
        <div class="btnBox">
          <img src="@/assets/images/star.png" alt />
          <span>加入精选</span>
        </div>
      </div>
      <div class="hei130"></div>
      <!-- 底部按钮 -->
      <div class="twoBotBox">
        <span class="botBtn" @click="botBtn">帮我推荐</span>
        <empty-tabbar></empty-tabbar>
      </div>
    </div>
    <!-- 底部 -->
    <empty-tabbar></empty-tabbar>
    <tabbar></tabbar>
  </div>
</template>

<script>
import Tabbar from "@/pages/home/components/Tabbar";
import emptyTabbar from "@/pages/home/components/emptyTabbar";
import FourSteps from "./components/FourSteps";
import Slider from "./components/Slider";
import utils from "@/assets/scripts/utils";
import wx from "weixin-js-sdk";
import { PopupPicker, Group } from "vux";

export default {
  name: "Decorate",
  components: {
    Tabbar,
    emptyTabbar,
    FourSteps,
    Slider,
    PopupPicker,
    Group
  },
  data() {
    return {
      zzSta: false, //遮罩层状态
      stepIndex: 1, //第几步
      detailStatus: true, //第二步查看详情
      onThis:true,//是否在当前页面
      stepData: {
        one: {
          priBet: [0, 25],
          areaData: [],
          area: [],
          hxData: [],
          hx: [],
          oriCity:null,
          cityData: [["请选择"]],
          city: [],
          cityId:null,
          fgData: [["请选择"]],
          fg: [],
          fgId: null,
          seaData:{data:[]},//搜索出来的结果
          page:0
        }
      },
      param: {
        callbackQuery: "callback", // jsonp key //请求传递参数 1
        callbackName: "jsonpCallback", // jsonp key //请求传递参数 2
        timestamp: Date.parse(new Date()) / 1000,
        token: this.$md5(
          this.$md5("dyrs_$&*2019") + Date.parse(new Date()) / 1000
        ),
        response_type: 'jsonp'
      }
    };
  },
  created(){
    document.title = "我要装修";
    // 获取标签分类----城市
    this.$jsonp(this.$store.state.categoryUrl + "/cms/site", this.param).then(
      res => {
        // console.log(res)
        var newData = [[]];
        for (var i in res[2]) {
          newData[0].push(res[2][i].name);
        }
        this.$set(this.stepData.one, "cityData", newData);
        this.$set(this.stepData.one, "oriCity", res[2]);//原始的城市数据
      }
    );
    // 获取标签分类----面积
    this.$jsonp(
      this.$store.state.categoryUrl + "/photo/houseArea",
      this.param
    ).then(res => {
      this.$set(this.stepData.one, "areaData", res[2]);
      this.$set(this.stepData.one, "area", res[2][0]); //默认选择第一个
    });
    // 获取标签分类----户型
    this.$jsonp(
      this.$store.state.categoryUrl + "/photo/houseType",
      this.param
    ).then(res => {
      this.$set(this.stepData.one, "hxData", res[2]);
      this.$set(this.stepData.one, "hx", res[2][0]); //默认选择第一个
    });
    // 获取标签分类----风格
    this.$jsonp(
      this.$store.state.categoryUrl + "/photo/style",
      this.param
    ).then(res => {
      var newData = [[]];
      for (var i in res[2]) {
        newData[0].push(res[2][i].name);
      }
      this.$set(this.stepData.one, "fgData", newData);
      this.$set(this.stepData.one, "oriFg", res[2]);//原始的风格数据
    });
  },
  methods: {
    // 城市选择 获取城市ID
    cityChange(res) {
      var cityId = ''
      for(var i in this.stepData.one.oriCity){
        if(this.stepData.one.oriCity[i].name == res){
          for(var j in this.stepData.one.oriCity[i].site){
            cityId+=this.stepData.one.oriCity[i].site[j].id+','
          }
          this.$set(this.stepData.one, "cityId", cityId);
          console.log(this.stepData.one.cityId)
        }
      }
    },
    // 风格选择
    fgChange(res) {
      for(var i in this.stepData.one.oriFg){
        if(this.stepData.one.oriFg[i].name == res){
          this.$set(this.stepData.one, "fgId", this.stepData.one.oriFg[i].id);
          return
        }
      }
    },
    // 下一步
    cutStep(idx) {
      this.stepIndex = idx;
      this.zzSta = false;
      this.stepData.one.page=0;//页数归零
      window.scrollTo(0,0);//回到顶部
      this.$nextTick(() => {
        this.$refs.changeStep.changeStep(idx - 1);
        if (idx == 3) {//第一步筛选
          var param = this.param;
          param.house_type_id = this.stepData.one.hx.id;//户型ID
          param.house_area_id = this.stepData.one.area.id;//面积ID
          param.house_site_id = this.stepData.one.cityId? this.stepData.one.cityId.substring(0,this.stepData.one.cityId.length-1): '';//城市ID
          param.house_style_id = this.stepData.one.fgId? this.stepData.one.fgId: '';//风格ID
          param.token = this.$md5(
            this.$md5("dyrs_$&*2019") + Date.parse(new Date()) / 1000
          ),
          param.page=this.stepData.one.page+1,
          param.price_range = this.stepData.one.priBet[0]+','+this.stepData.one.priBet[1]
          param.timestamp = Date.parse(new Date()) / 1000
          this.$jsonp(
            this.$store.state.categoryUrl + "/photo/subjectList",
            param
          ).then(res => {
            if(this.stepData.one.page){
              var newData = this.stepData.one.seaData.data.concat(res[2].data)
              this.$set(this.stepData.one.seaData,'data',newData)
            }else{
              this.$set(this.stepData.one,'seaData',res[2])
            }
            this.stepData.one.page+=1
          });
        }
      });
    },
    // 第一次筛选结果上划加载更多
    handleScroll(res){
      if((document.documentElement.scrollTop+window.innerHeight)==document.body.offsetHeight && this.stepIndex==3){
        if(this.stepData.one.page > this.stepData.one.seaData.item_info.current_page){//当前页数大于总页数 return
          console.log("最后一页")
          return
        }else{
          var param = this.param;
          param.house_type_id = this.stepData.one.hx.id;//户型ID
          param.house_area_id = this.stepData.one.area.id;//面积ID
          param.house_site_id = this.stepData.one.cityId? this.stepData.one.cityId.substring(0,this.stepData.one.cityId.length-1): '';//城市ID
          param.house_style_id = this.stepData.one.fgId? this.stepData.one.fgId: '';//风格ID
          param.token = this.$md5(
            this.$md5("dyrs_$&*2019") + Date.parse(new Date()) / 1000
          ),
          param.page=this.stepData.one.page+1,
          param.timestamp = Date.parse(new Date()) / 1000,
          this.$jsonp(
            this.$store.state.categoryUrl + "/photo/subjectList",
            param
          ).then(res => {
            if(this.stepData.one.page){
              var newData = this.stepData.one.seaData.data.concat(res[2].data)
              this.$set(this.stepData.one.seaData,'data',newData)
            }else{
              this.$set(this.stepData.one,'seaData',res[2])
            }
            this.stepData.one.page+=1
          });
        }
      }
    },
    //slider组件返回价格
    changeSlider(res) {
      this.$set(this.stepData.one.priBet, 0, res[0]);
      this.$set(this.stepData.one.priBet, 1, res[1]);
    },
    // 价格1输入改变值
    budgetPriceChange1(res) {
      if (
        Number(res.target.value) > 0 &&
        Number(res.target.value) <= this.stepData.one.priBet[1] - 10 &&
        Number(res.target.value) != ""
      ) {
        this.$set(this.stepData.one.priBet, 0, Number(res.target.value));
        this.$refs.slider.updateSlider(
          Number(res.target.value),
          this.stepData.one.priBet[1]
        );
      } else {
        this.$set(this.stepData.one.priBet, 0, 5);
        this.$refs.slider.updateSlider(5, this.stepData.one.priBet[1]);
      }
    },
    // 价格2输入改变值
    budgetPriceChange2(res) {
      if (
        Number(res.target.value) <= 100 &&
        Number(res.target.value) >= this.stepData.one.priBet[0] + 10 &&
        Number(res.target.value) != ""
      ) {
        this.$set(this.stepData.one.priBet, 1, Number(res.target.value));
        this.$refs.slider.updateSlider(
          this.stepData.one.priBet[0],
          Number(res.target.value)
        );
      } else {
        this.$set(this.stepData.one.priBet, 1, 100);
        this.$refs.slider.updateSlider(this.stepData.one.priBet[0], 100);
      }
    },
    // 步骤选择
    choiceStep(para1, para2, para3) {
      this.$set(this.stepData[para1], [para2], para3);
    },
    // 查看详情
    toRoomDetail(res) {
      var stepData = this.stepData;
      stepData.subject_id = res;
      this.$router.push({
        name: "roomDetails",
        params: {
          stepData: JSON.stringify(stepData)
        }
      });
      window.removeEventListener('scroll',this.handleScroll);
      //
    },
    // 筛选按钮
    sxBtn(res) {
      this.zzSta = !this.zzSta;
    },
    // 重置按钮
    resetBtn(res) {
      this.choiceStep("one", "city", []); //重置城市
      this.choiceStep("one", "area", this.stepData.one.areaData[0]); //重置面积
      this.choiceStep("one", "hx", this.stepData.one.hxData[0]); //重置户型
      this.choiceStep("one", "fg", []); //重置风格
    },
    // 确定按钮
    confirmBtn(res) {
      this.sxBtn(); //关闭弹窗,
      this.stepData.one.page=0;//页数归零
      window.scrollTo(0,0);//回到顶部
      // 刷新数据
      this.cutStep(3);//重新获取更新选项后案例列表
    },
    // 点击帮我推荐
    botBtn(res) {
      this.$router.push({ name: "threeStep", params: {} });
      window.removeEventListener('scroll',this.handleScroll);
    }
  },
  mounted() {
    let code = utils.getUrlKey("code");
    this.global.setGlobalData("code", code);
    window.addEventListener('scroll',this.handleScroll);
    // wx.config({
    //     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    //     appId: 'wx050902a8c852c7c1', // 必填，公众号的唯一标识
    //     timestamp: '1559901442', // 必填，生成签名的时间戳
    //     nonceStr: '1OLqIbMJ9bRtYFOs', // 必填，生成签名的随机串
    //     signature: '7098e60c0ede41841fea177f803b18f4',// 必填，签名
    //     jsApiList: ['hideAllNonBaseMenuItem'] // 必填，需要使用的JS接口列表
    // });
    // wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
    //   wx.hideAllNonBaseMenuItem();
    // });
  },
  activated() {
    window.addEventListener('scroll',this.handleScroll);
    if (this.$route.params.step == 2) {
      this.cutStep(2);
    }
  },
  beforeRouteLeave(to, from, next) {
    this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    next();
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if(from.name=='roomDetails'){

      }else{
        document.body.scrollTop = vm.scrollTop;
      }
    });
  }
};
</script>

<style lang="stylus" scoped>
.cityGroup {
  margin-top: 20px;
}

.cityGroup >>> .weui-cells:after {
  border: none;
}

.cityGroup >>> .weui-cells:before {
  border: none;
}

.cityGroup >>> .vux-no-group-title {
  margin-top: 0;
}

.cityGroup >>> .weui-cell {
  padding: 10px 0;
}

.cityGroup >>> .weui-label {
  line-height: 0.4rem;
  font-weight: bold;
  color: #333;
  letter-spacing: 0.026667rem;
  text-align: left;
  font-size: 0.4rem;
}

.cityGroup >>> .vux-popup-picker-select {
  font-size: 28px;
}

.cityGroup >>> .vux-popup-picker-value {
  font-size: 28px;
  color: #333;
}

.cityGroup2 >>> .weui-cell {
  height: 60px;
  line-height: 60px;
  font-size: 28px;
  padding: 0 10px;
}

.cityGroup2 >>> .vux-popup-picker-value {
  font-size: 28px;
  color: #333;
}

.vux-cell-box:not(:first-child):before {
  content: ' ';
  position: absolute;
  top: 0;
  width: 100%;
  height: 1px;
  border-top: none;
  color: #D9D9D9;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  left: 15px;
}

.cityBox {
  width: 100%;
  border: none !important;
  text-align: center;
  display: flex !important;
  flex: 1;
  align-items: center !important;
  font-size: 26px !important;
  color: #a90017 !important;
}

.cityBox:before {
  border: 0;
}

.overHidden {
  position: fiexd;
}

.zhezhao {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.6);
}

// 开篇提示
.indexStep {
  display: flex;
  flex-direction: column;
  align-items: center;

  .topBox {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    letter-spacing: 2px;
    color: #333333;
    padding: 35px 0;

    .numBox {
      display: block;
      width: 80px;
      height: 80px;
      border-radius: 50%;
      line-height: 80px;
      text-align: center;
      background: #ce0021;
      color: #ffffff;
      font-size: 38px;
      font-weight: bold;
      margin-right: 13px;
    }
  }

  .centerImg {
    width: 702px;
    height: auto;
  }

  .usePeople {
    line-height: 32px;
    color: #333333;
    font-size: 22px;
    margin: 50px 0 30px;

    i {
      font-size: 32px;
      color: #a90017;
    }
  }

  .HeadPortrait {
    width: 450px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .headImg {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
  }

  .indexStepBtn {
    width: 534px;
    height: 80px;
    border-radius: 10px;
    background: #ce0021;
    color: #ffffff;
    font-size: 28px;
    line-height: 80px;
    margin-top: 144px;
    text-align: center;
  }
}

// 第一步
.firstStep {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;

  .topBoxEmpty {
    height: 300px;
  }

  .topBox {
    position: fixed;
    left: 0;
    tof: 0;
    z-index: 66;
    width: 100%;
    height: 300px;
    border-radius: 10px;
    box-shadow: 0 0 10px 2px #f4f4f4;
    box-sizing: border-box;
    padding-top: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
    background: url('../../assets/images/bg1.png');
    background-size: 100% 100%;

    .usePeople {
      line-height: 28px;
      color: #999999;
      font-size: 22px;
      margin-top: 36px;

      em {
        font-size: 30px;
        font-weight: blod;
        color: #a90017;
      }

      i {
        color: #a90017;
      }
    }
  }

  .centerBox {
    width: 700px;
    background: #ffffff;
    // border-radius 10 px
    // box-shadow 0 0 10px 2px #f4f4f4
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 50px 36px;
    margin-bottom: 25px;

    .title {
      line-height: 30px;
      font-weight: bold;
      color: #333333;
      letter-spacing: 2px;
      text-align: left;
      font-size: 30px;

      i {
        font-weight: normal;
        font-size: 22px;
      }
    }

    .titleRoomArea {
      margin: 30px 0 10px;
    }

    .budgetInputBox {
      display: flex;
      align-items: center;
      font-size: 22px;
      margin: 30px 0 20px;

      .budgetInput {
        width: 150px;
        height: 60px;
        border-radius: 30px;
        box-sizing: border-box;
        border: 2px solid #e1e1e1;
        text-align: center;
        color: #333333;
      }

      .textSpan1 {
        margin: 0 10px;
      }

      .textSpan2 {
        color: #333333;
        margin-left: 10px;
      }
    }

    .scaleBox {
      width: 100%;
      height: 20px;
      font-size: 20px;
      color: #333333;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: flex-start;

      span {
        min-width: 60px;
      }

      .scale55 {
        margin-left: 8px;
      }
    }

    .areaChoice {
      // display flex
      // align-items center
      // justify-content space-between
      // margin-top 10px
      .areaSpan {
        display: inline-block;
        float: left;
        margin-top: 10px;
        width: 150px;
        height: 60px;
        box-sizing: border-box;
        text-align: center;
        line-height: 60px;
        font-size: 22px;
        color: #666666;
        border: 2px solid #dddddd;
        border-radius: 30px;
        margin-right: 9px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .areaSpan:nth-child(4n) {
        margin-right: 0;
      }

      .areaActive {
        color: #a90017;
        border-color: #a90017;
      }
    }

    .twoStepBtn {
      display: block;
      width: 628px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      border-radius: 10px;
      background: #ce0021;
      color: #ffffff;
      font-size: 28px;
      margin-top: 50px;
      letter-spacing: 2px;
    }
  }
}

// 第二步
.twoStep {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #ffffff;

  .topBoxEmpty {
    height: 370px;
  }

  .topBoxEmpty2 {
    height: 300px;
  }

  .topBox {
    position: fixed;
    left: 0;
    tof: 0;
    width: 100%;
    z-index: 66;
    height: 300px;
    box-shadow: 0 0 10px 2px #f4f4f4;
    box-sizing: border-box;
    padding-top: 62px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
    background: url('../../assets/images/bg1.png');
    background-size: 100% 100%;

    .choLab {
      width: 628px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 25px;
      box-sizing: border-box;
      padding: 0 20px;

      .chLaSpan {
        display: block;
        width: 176px;
        height: 60px;
        box-sizing: border-box;
        text-align: center;
        line-height: 60px;
        font-size: 22px;
        color: #ffffff;
        border: 2px solid #dddddd;
        border-radius: 30px;
      }

      img {
        width: 13px;
        height: 24px;
      }
    }
  }

  .classify {
    width: 100%;
    position: fixed;
    top: 300px;
    left: 0;
    z-index: 66;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      width: 628px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 28px;
      font-size: 28px;
      color: #333333;
      box-sizing: border-box;
      padding-top: 10px;

      .title2 {
        height: 50px;
        line-height: 50px;
      }

      .title3 {
        height: 50px;
        line-height: 50px;
        vertical-align: bottom;
        font-size: 22px;

        .upImg {
          width: 16px;
          height: 11px;
          vertical-align: center;
          margin-left: 8px;
        }
      }
    }

    .labCon {
      width: 100%;
      background: #ffffff;
      // display flex
      // align-items center
      // flex-direction column
      height: 500px;
      overflow-y: scroll;

      .labBox {
        width: 628px;
        display: flex;
        justify-content: flex-start;
        margin: 0 auto;
        margin-top: 20px;

        .labTitle {
          width: 100px;
          height: 60px;
          line-height: 60px;
          font-size: 28px;
          color: #333333;
        }

        .labTitle2 {
          width: auto;
          line-height: 60px;
        }

        .labLisBox {
          flex: 1;

          .labSpan {
            display: inline-block;
            float: left;
            width: 150px;
            height: 60px;
            border-radius: 30px;
            box-sizing: border-box;
            border: 1px solid #e1e1e1; /* no */
            text-align: center;
            color: #333333;
            line-height: 60px;
            margin: 0 10px 10px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 24px;
          }

          .actStyle {
            color: #a90017;
            border-color: #a90017;
          }
        }
      }
    }

    .btoBtnBox {
      display: flex;
      align-item: center;
      justify-content: center;
      margin: 20px 0;

      .btnLeft {
        width: 250px;
        height: 80px;
        line-height: 80px;
        border-radius: 10px;
        border: 1px solid #dddddd; /* no */
        font-size: 28px;
        color: #666666;
        text-align: center;
      }

      .btnRight {
        width: 370px;
        height: 80px;
        line-height: 80px;
        border-radius: 10px;
        font-size: 28px;
        color: #ffffff;
        text-align: center;
        background: #ce0021;
        margin-left: 8px;
      }
    }
  }

  .resultList {
    width: 700px;
    border-radius: 10px;
    box-shadow: 0 0 10px 4px #f4f4f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 14px;
    position: relative;

    .listSpan1 {
      width: 628px;
      text-align: right;
      line-height: 20px;
      font-size: 20px;
      color: #999999;
      margin: 29px 0 20px;

      i {
        color: #a90017;
      }
    }

    .centerImg {
      width: 629px;
      height: 360px;
      position: relative;

      .listImg {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
      }

      .cenBot {
        height: 20px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #ffffff;
        position: absolute;
        right: 20px;
        bottom: 20px;
        z-index: 2;

        .eyeImg {
          width: 26px;
          height: 18px;
          margin-right: 10px;
        }
      }
    }

    .labSpan1 {
      display: block;
      width: 628px;
      line-height: 30px;
      font-size: 30px;
      font-weight: bold;
      color: #333333;
      letter-spacing: 1px;
      text-align: left;
      margin: 30px 0 20px;
    }

    .labSpan2 {
      display: block;
      width: 628px;
      line-height: 22px;
      font-size: 22px;
      color: #666666;
      letter-spacing: 1px;
      text-align: left;
      margin-bottom: 38px;
    }

    .btnBox {
      width: 205px;
      height: 60px;
      position: absolute;
      right: 0;
      bottom: 46px;
      background: url('../../assets/images/btnbg.jpg');
      background-size: 100% 100%;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 26px;
        height: 24px;
        margin-right: 10px;
      }

      span {
        font-size: 22px;
        color: #ffffff;
      }
    }
  }

  .twoBotBox {
    width: 100%;
    background: #ffffff;
    display: flex;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    flex-direction: column;
    z-index: 6;

    .botBtn {
      width: 628px;
      height: 80px;
      line-height: 80px;
      fong-size: 28px;
      color: #ffffff;
      letter-spacing: 1px;
      text-align: center;
      border-radius: 10px;
      background: #ce0021;
      margin: 20px 0;
    }
  }

  .hei130 {
    height: 130px;
  }
}
</style>
